<template>
    {{ productId }}
    <el-table :data="items" stripe style="width: 100%" @select="handleSelection">
        <el-table-column prop="itemId" label="Item Id" width="180" />
        <el-table-column prop="productId" label="Product Id" width="180" />
        <el-table-column prop="listPrice" label="List Price" width="180" />
        <el-table-column prop="unitCost" label="Unit Cost" width="180" />
        <el-table-column prop="supplierId" label="Supplier Id" width="180" />
        <el-table-column fixed="right" label="Operations" width="120">
            <template v-slot="scope">
                <el-button type="text" size="small" @click="addToCart(scope.row)">ADD to Cart</el-button>
                 <el-button type="text" size="small" @click="detail(scope.row.itemId)">查看详情</el-button>
            </template>
        </el-table-column>

    </el-table>




</template>

<script>
// import { dataToEsm } from "@rollup/pluginutils";
import axios from "axios";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
import router from "../router";
import { reactive } from 'vue';
// import store from "../store";
// import router from '../router'
var username=window.sessionStorage.getItem('username');
export default {
    name: "item",
    props: ['productId'],
    methods:{
        detail(itemId){
            var itemDetail;
            axios({
                method: 'POST',
                url:"/item/getItem/"+itemId,
            }).then(Response=>{
                
                itemDetail=Response.data.data;
               // itemDeatil=JSON.parse(Response.data.data);
                window.sessionStorage.setItem("itemDetail", JSON.stringify(itemDetail));
               // console.log(window.sessionStorage.getItem("itemDeatil"));
              // window.sessionStorage.setItem("userForitem",JSON.stringify(userForitem));

                 window.location.href="http://localhost:3000/ItemView";
            })
        }

    },
    setup(props) {
        const items = ref([]);
        onMounted(async () => {
            //await addLog(username,haha.action);
            let itemList = await getItem(props.productId);
            items.value = itemList.data.data;
        })

        const getItem = (productId) => {
            return axios.get("/product/" + productId + "/items");
        }
       /*  const haha = reactive({
            action:"View "+props.productId+" AllItem",
        })
        const addLog=(username,action)=>
        {
            return axios.post("/account/"+username+"/logg/"+action).catch(e => {
                console.log(e.res.data) ;
            })
        } */
        const store = useStore();
        const addToCart = (item) => {
            //addLog(username,"add "+item.itemId+"to cart");
            console.log(item);
            console.log(store.state.shopCart);
            console.log( store.state.userInfo.username);
            const username = store.state.userInfo.username;
            // addLog(username,"add "+item.itemId+"to cart");
            try {
                axios.post("account/" + username + "/addToCart/" + item.itemId).then(res => {
                    router.push({ path: "/cart" });
                });
            } catch (error) {
                console.log(error);
                ElMessage.error(error);
            }

        }

        return {
            items,
            addToCart
        }
    },

}
</script>